<template>
	<view class="soupList">
		<z-paging ref="paging" safe-area-inset-bottom v-model="soupData" @query="queryList">
			<template #loading>
				<uni-load-more status="loading"></uni-load-more>
			</template>
			<template #top>
				<!-- 头部区域 -->
				<view class="headTop">
					<view class="title">
						我的健康饮食知识
					</view>
					<navigator url="/pages_self/soup/edit" class="btn">
						+编写健康饮食知识
					</navigator>
				</view>
			</template>

			<view class="list">
				<view class="item" v-for="item in soupData" :key="item._id">
					<soup-item :item="item"></soup-item>
				</view>
			</view>
		</z-paging>

	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue'
	import {
		useUserStore
	} from '../../stores/user'

	const userStore = useUserStore()
	const paging = ref(null)
	const soupData = ref([])
	//请求数据库
	const db = uniCloud.database()
	//下拉刷新的操作
	const queryList = (pageNo, pageSize) => {
		// console.log(pageNo, pageSize);
		getSoupList(pageNo, pageSize)
	}

	//请求数据
	const getSoupList = async (pageNo, pageSize) => {
		let skip = (pageNo - 1) * pageSize
		try {
			let {
				result: {
					errCode,
					data
				}
			} = await db.collection('soup-jt').where(`user_id == $cloudEnv_uid`).field(
					'publish_date,last_modify_date,content,soup_type,like_count,collect_count,comment_count,status'
				)
				.orderBy("last_modify_date", "desc").skip(skip).limit(pageSize).get()
			// console.log(data);
			if (errCode != 0) return
			// soupData.value = data
			paging.value.complete(data)
		} catch (e) {
			paging.value.complete(false);
		}

	}

	//接收来自编辑页面的事件  每次监听到 自定义事件发生的时候 调用回调事件
	uni.$on("soupUpdate", (e) => {
		nextTick(() => {
			paging.value.refresh();
		})
	})

	// getSoupList()
</script>

<style lang="scss" scoped>
	.soupList {
		.headTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #000;
			font-weight: 600;
			padding: 30rpx 30rpx 10rpx;

			.title {
				font-size: 40rpx;
			}

			.btn {
				border: 1px solid #000;
				padding: 8rpx 15rpx;
				border-radius: 100rpx;
			}
		}

		.list {
			padding: 30rpx 30rpx 0;

		}
	}
</style>